<template>
	<view class="page-top-bg"></view>
	<AdaptiveNavBar :showBack="true" title="上架详情" :showHome="false" :showShadow="false" text-color="#ffffff"
		background-color="#FC642F" />
	<view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
		<view class="shelf-details-container">
			<view class="main-content">
				<!-- 产品信息 -->
				<view class="main-top-period" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
					<view v-if="productCardInfo && productCardInfo.mainInfo" class="product-card-wrapper">
						<ProductCard :info="productCardInfo" />
					</view>
				</view>

				<!-- 已选班期（所有产品类型都显示） -->
				<section class="section" v-if="periodDates.length > 0">
					<view style="display: flex;align-items: center;">
						<view class="section-header" style="flex:1">
							<view class="section-header__icon-wrapper">
								<FontIcon name="icon-xuanzebanqi"
									class="section-header__icon section-header__font_icon"></FontIcon>
							</view>
							<text class="section-header__title">已选班期</text>
						</view>
						<view style="margin-right: 28rpx;font-size: 28rpx;color: #333333;">{{ periodDates.length }}期
						</view>
					</view>
					<DateCard :dates="periodDates" :isMultipleSelect="false" :activeIndex="-1" :readOnly="true" />
				</section>

				<!-- 市场渠道设置 -->
				<section class="section">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-shichangqudaoshezhi" :size="18"
								class="section-header__icon section-header__font_icon"></FontIcon>
						</view>
						<text class="section-header__title">市场渠道设置</text>
					</view>
					<view class="form-group">
						<view class="form-group__item">
							<text class="form-group__label">销售模式</text>
							<text class="form-group__picker">API渠道协作</text>
						</view>
					</view>
				</section>

				<!-- 泛营期设置（businessType !== 3 时显示） -->
				<section class="section" v-if="periodSettingsAvailable && businessType !== 3">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-shichangqudaoshezhi" :size="24"
								class="section-header__icon section-header__font_icon"></FontIcon>
						</view>
						<text class="section-header__title">泛营期设置</text>
					</view>
					<view class="number-input-group">
						<view class="number-input-group__left">
							<view class="number-input-group__label">{{ periodDeadlineLabel }}</view>
							<view class="number-input-group__desc">{{ periodDeadlineDescription }}</view>
						</view>
						<view class="number-display-control">
							<view class="number-display-badge number-display-badge--minus">-</view>
							<view class="number-input-group__display number-input-group__display--wide">
								<text class="number-input-group__value">{{
									formatDisplayValue(periodSettings.applicationDeadline) }}</text>
								<text class="number-input-group__unit">天</text>
							</view>
							<view class="number-display-badge number-display-badge--plus">+</view>
						</view>
					</view>

					<view class="number-input-group margin-top-large">
						<view class="number-input-group__left">
							<view class="number-input-group__label">{{ periodConfirmationLabel }}</view>
							<view class="number-input-group__desc">{{ periodConfirmationDescription }}</view>
						</view>
						<view class="number-display-control">
							<view class="number-display-badge number-display-badge--minus">-</view>
							<view class="number-input-group__display number-input-group__display--wide">
								<text class="number-input-group__value">{{
									formatDisplayValue(periodSettings.confirmationTime) }}</text>
								<text class="number-input-group__unit">天</text>
							</view>
							<view class="number-display-badge number-display-badge--plus">+</view>
						</view>
					</view>
				</section>

				<!-- 接送/集散地点（productType=2 综合研学或 productType=4 组团业务时显示） -->
				<section class="section"
					v-if="(detailMode.isComprehensiveStudy || detailMode.isGroupBusiness) && (gatherAddress || saleArea)">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-youxue" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title" style="flex:1">接送/集散地点</text>
						<text class="gather-area-header__tag" v-if="saleArea"
							style="color:#999999;font-size:24rpx;margin-right: 28rpx;">区/县级</text>
					</view>
					<view class="gather-area-card" v-if="saleArea">
						<view class="gather-area-chip" v-if="saleAreaParts.province">{{ saleAreaParts.province }}</view>
						<view class="gather-area-chip" v-if="saleAreaParts.city">{{ saleAreaParts.city }}</view>
						<view class="gather-area-chip" v-if="saleAreaParts.district">{{ saleAreaParts.district }}</view>
						<view class="gather-area-chip gather-area-chip--full" v-if="!saleAreaParts.hasParts">{{
							saleAreaParts.raw }}</view>
					</view>
					<view class="gather-address-display" v-if="gatherAddress">
						<view class="gather-address-item">
							<text class="gather-address-label">集散地点</text>
							<text class="gather-address-value">{{ gatherAddress }}</text>
						</view>
					</view>
				</section>

				<!-- 名额设置（businessType !== 3 时显示） -->
				<section class="section" v-if="businessType !== 3 && quotaDisplayItems.length">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-mingeshezhi" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">
							{{ (isApplyCall && businessType === 2) || detailMode.isGroupBusiness ? '名额设置/申请名额' : '名额设置'
							}}
						</text>
					</view>

					<view class="number-input-group margin-top-large" v-for="item in quotaDisplayItems" :key="item.key">
						<view class="number-input-group__left">
							<view class="number-input-group__label">{{ item.label }}</view>
							<view class="number-input-group__desc">{{ item.description }}</view>
						</view>
						<view class="number-display-control">
							<view class="number-display-badge number-display-badge--minus">-</view>
							<view class="number-input-group__display number-input-group__display--wide">
								<text class="number-input-group__value">{{ formatDisplayValue(item.value) }}</text>
								<text class="number-input-group__unit">{{ item.unit }}</text>
							</view>
							<view class="number-display-badge number-display-badge--plus">+</view>
						</view>
					</view>
				</section>

				<!-- 小组名额设置（二类商家 - productType=2 综合研学或 productType=4 组团业务） -->
				<section class="section"
					v-if="((isApplyCall && businessType === 2) || (businessType === 2 && detailMode.isComprehensiveStudy)) && smallGroupDisplayItems.length">
					<view class="section-header">
						<text class="section-header__icon cuIcon-group"></text>
						<text class="section-header__title">小组名额设置（随队比例）</text>
					</view>
					<view class="number-input-group margin-top-large" v-for="item in smallGroupDisplayItems"
						:key="item.key">
						<view class="number-input-group__left">
							<view class="number-input-group__label">{{ item.label }}</view>
							<view class="number-input-group__desc">{{ item.description }}</view>
						</view>
						<view class="number-display-control">
							<view class="number-display-badge number-display-badge--minus">-</view>
							<view class="number-input-group__display number-input-group__display--wide">
								<text class="number-input-group__value">{{ formatDisplayValue(item.value) }}</text>
								<text class="number-input-group__unit">{{ item.unit }}</text>
							</view>
							<view class="number-display-badge number-display-badge--plus">+</view>
						</view>
					</view>
				</section>

				<!-- 三类小组设置 -->
				<section class="section"
					v-if="detailMode.isStudyActivity && (smallGroupSettings.groupMaxPeople || smallGroupSettings.maxGroupsPerService)">
					<view class="section-header">
						<text class="section-header__icon cuIcon-group"></text>
						<text class="section-header__title">小组名额设置（随队比例）</text>
					</view>
					<view class="group-quota-summary" v-if="smallGroupSettings.groupMaxPeople">
						<text class="summary-text">每小组名额上限 {{ smallGroupSettings.groupMaxPeople }} 人</text>
					</view>
					<view class="group-quota-summary" v-if="smallGroupSettings.groupMinPeople">
						<text class="summary-text">每小组名额下限 {{ smallGroupSettings.groupMinPeople }} 人</text>
					</view>
					<view class="group-quota-summary" v-if="smallGroupSettings.maxGroupsPerService">
						<text class="summary-text">可承载最大团数 {{ smallGroupSettings.maxGroupsPerService }} 团</text>
					</view>
				</section>

				<!-- 场馆联系人 -->
				<section class="section" v-if="detailMode.isDestReceiveOrCamp">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">场馆联系人</text>
					</view>

					<view class="working-box">
						<view class="working-item" v-for="(contact, index) in venueContacts" :key="index">
							<view class="working-avatar"
								style="width: 88rpx;height: 88rpx;border-radius: 5000rpx;background: #eeeeee;overflow: hidden;display: flex;align-items: center;justify-content: center;">
								<u-icon name="account" size="44" color="#999999"></u-icon>
							</view>
							<view class="working-info">
								<view class="woking-info-top">{{ contact.name }}<text>{{ contact.role }}</text>
								</view>
								<view class="woking-info-bottom">{{ contact.phoneNumber }}</view>
							</view>
							<view class="working-btn">
								<view class="working-delete" @click="deleteContact(contact.phoneNumber)">删除</view>
							</view>
						</view>
					</view>
					<view class="working-bottom">
						<view class="working-bottom-top" v-if="businessType === 3">
							<view>备注：随着团队报名人员的增多，</view>
							<view>您可能需要添加更多的工作人员</view>
						</view>
						<view class="working-bottom-bottom" @click="showStaffPopup('venue')">
							<view style="font-size:20rpx">+ 添加</view>
						</view>
					</view>
				</section>

				<!-- 组团社联系人 -->
				<section class="section" v-if="detailMode.isComprehensiveStudy || detailMode.isGroupBusiness">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">组团社联系人</text>
					</view>

					<view class="working-box">
						<view class="working-item" v-for="(contact, index) in organizerContacts" :key="'org-' + index">
							<view class="working-avatar"
								style="width: 88rpx;height: 88rpx;border-radius: 5000rpx;background: #eeeeee;overflow: hidden;display: flex;align-items: center;justify-content: center;">
								<u-icon name="account" size="44" color="#999999"></u-icon>
							</view>
							<view class="working-info">
								<view class="woking-info-top">{{ contact.name }}<text>{{ contact.category }}</text>
								</view>
								<view class="woking-info-bottom">{{ contact.phone }}</view>
							</view>
							<view class="working-btn">
								<view class="working-delete" @click="deleteOrganizerContact(contact.phone)">删除</view>
							</view>
						</view>
					</view>
					<view class="working-bottom">
						<view class="working-bottom-bottom" @click="showStaffPopup('organizer')">
							<view style="font-size:20rpx">+ 添加</view>
						</view>
					</view>
				</section>

				<!-- 随队人员（productType=4 或 三类商家） -->
				<section class="section" v-if="detailMode.isGroupBusiness || businessType === 3">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">随队人员</text>
					</view>

					<view class="working-box">
						<view class="working-item" v-for="(member, index) in teamMembers" :key="'team-' + index">
							<view class="working-avatar"
								style="width: 88rpx;height: 88rpx;border-radius: 5000rpx;background: #eeeeee;overflow: hidden;display: flex;align-items: center;justify-content: center;">
								<u-icon name="account" size="44" color="#999999"></u-icon>
							</view>
							<view class="working-info">
								<view class="woking-info-top">{{ member.name }}<text>{{ member.category || '随队'
								}}</text>
								</view>
								<view class="woking-info-bottom">{{ member.phone }}</view>
							</view>
							<view class="working-btn">
								<view class="working-delete" @click="deleteCamper(member.phone)">删除</view>
							</view>
						</view>
					</view>
					<view class="working-bottom">
						<view class="working-bottom-bottom" @click="showStaffPopup('camper')">
							<view style="font-size:20rpx">+ 添加</view>
						</view>
					</view>
				</section>

				<!-- 工作人员配置弹窗 -->
				<u-popup ref="staffPopup" mode="bottom" :show="showStaffPopupForm" @close="closeStaffPopup" :round="20"
					:mask-close-able="true">
					<view class="staff-popup-container">
						<view class="staff-popup-header">
							<text class="staff-popup-title">联系人配置</text>
							<u-icon name="close" size="28" @click="closeStaffPopup"></u-icon>
						</view>

						<scroll-view class="" scroll-y>
							<!-- 添加联系人表单 -->
							<view class="staff-add-form">
								<view class="staff-add-form__title">添加联系人</view>
								<view class="staff-add-form__fields">
									<view class="staff-add-form__field">
										<text class="staff-add-form__label">类型</text>
										<picker @change="handleContactTypeChange" :value="contactTypeIndex"
											:range="contactTypeOptions" range-key="label">
											<view class="staff-add-form__input"
												:style="{ color: newStaff.category ? '#333333' : '#999999' }">
												{{ newStaff.category || '请选择类型' }}
												<img src="../../static/systemIcon/arrow-bottom.png"
													style="width: 32rpx; height: 32rpx; margin-left: 8rpx; float: right;"
													mode="aspectFit" />
											</view>
										</picker>
									</view>
									<view class="staff-add-form__field">
										<text class="staff-add-form__label">姓名</text>
										<input class="staff-add-form__input" v-model="newStaff.name"
											placeholder="请输入姓名" />
									</view>
									<view class="staff-add-form__field">
										<text class="staff-add-form__label">电话</text>
										<input class="staff-add-form__input" v-model="newStaff.phone"
											placeholder="请输入电话" type="number" />
									</view>
								</view>
								<view class="staff-add-form__actions">
									<button class="staff-add-form__cancel" style="flex: 1;"
										@tap="cancelAddStaff">取消</button>
									<button class="staff-add-form__confirm" style="flex: 1;"
										@tap="confirmAddStaff">确认</button>
								</view>
							</view>
						</scroll-view>
					</view>
				</u-popup>

				<!-- 服务售价 -->
				<section class="section">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-fuwujiage" class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">服务售价</text>
					</view>

					<!-- productType=1,3（泛营地接待/目的地接待）创建模式 -->
					<view class="price-input-group" v-if="detailMode.isDestReceiveOrCamp && !isApplyCall">
						<view class="price-input-group__row">
							<view class="price-input-group__label">服务售价-渠道
								<image src="../../static/icons/question-red.svg"
									style="width: 32rpx; height: 32rpx; margin-left: 8rpx;" mode="aspectFit"
									@tap="showPriceModalByKey(getServicePriceKey)" />
							</view>
							<view class="price-input-group__input-wrapper">
								<text style="color: #999999;">￥</text>
								<text class="price-input-group__input">{{ servicePricing.channelPrice }}</text>
								<text class="price-input-group__currency">CNY/人</text>
							</view>
						</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row">
							<view class="price-input-group__label">结算金额</view>
							<text class="price-input-group__estimate">￥{{ servicePricing.settlementAmount }}
								CNY/人</text>
						</view>
						<view class="price-input-group__description">扣收软件技术服务费（费率{{ (servicePricing.serviceFeeRate ||
							rate) * 100
						}}%）后的实际到账金额</view>
					</view>

					<!-- productType=2（综合研学业务）B2 创建模式 -->
					<view class="price-input-group" v-if="detailMode.isComprehensiveStudy && !isApplyCall">
						<view class="price-input-group__row">
							<view class="price-input-group__label">服务售价-渠道
								<image src="../../static/icons/question-red.svg"
									style="width: 32rpx; height: 32rpx; margin-left: 8rpx;" mode="aspectFit"
									@tap="showPriceModalByKey('servicePrice2')" />
							</view>
							<view class="price-input-group__input-wrapper">
								<text style="color: #999999;">￥</text>
								<text class="price-input-group__input">{{ servicePricing.channelPrice }}</text>
								<text class="price-input-group__currency">CNY/人</text>
							</view>
						</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row">
							<view class="price-input-group__label">结算金额</view>
							<text class="price-input-group__estimate">￥{{ servicePricing.settlementAmount }}
								CNY/人</text>
						</view>
						<view class="price-input-group__description">扣收软件技术服务费（费率{{ (servicePricing.serviceFeeRate ||
							rate) * 100
						}}%）后的实际到账金额</view>
					</view>

					<!-- productType=4（组团业务）B2 申请调用模式 -->
					<view class="price-input-group"
						v-if="detailMode.isGroupBusiness || (isApplyCall && businessType === 2)">
						<view class="price-input-group__row">
							<view class="price-input-group__label">目的地接待服务售价</view>
							<text class="price-input-group__estimate"><text style="color:#000000">¥{{
								groupBusinessPricing.destinationServicePrice || '0.00'
							}}</text> CNY/人</text>
						</view>
						<view class="price-input-group__description">备注*指目的地接待服务商给出的报价</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row" style="margin-top: 30rpx;">
							<view class="price-input-group__label" style="font-weight: 700;">组团增值服务售价
								<image src="../../static/icons/question-red.svg"
									style="width: 32rpx; height: 32rpx; margin-left: 8rpx; vertical-align: middle;"
									mode="aspectFit" @tap="showPriceModalByKey('servicePrice2')" />
							</view>
							<view class="price-input-group__input-wrapper">
								<text style="color: #999999;">￥</text>
								<text class="price-input-group__input">{{ groupBusinessPricing.groupAddedServicePrice ||
									'0.00' }}</text>
								<text class="price-input-group__currency">CNY/人</text>
							</view>
						</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row">
							<view class="price-input-group__label">预估增值结算金额</view>
							<text class="price-input-group__estimate"><text style="color:#000000">¥{{
								groupBusinessPricing.estimatedGroupSettlement || '0.00'
							}}</text> CNY/人</text>
						</view>
						<view class="price-input-group__description">扣收平台软件技术服务费（费率{{ rate * 100 }}%）后的实际到账金额</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row" style="margin-top: 30rpx;">
							<view class="price-input-group__label">合单售价(面向渠道)</view>
							<text class="price-input-group__estimate" style="font-size: 28rpx;"><text
									style="color:#E64D42">¥{{ groupBusinessPricing.totalPrice || '0.00' }}</text>
								CNY/人</text>
						</view>
						<view class="price-input-group__description">指终端消费者预订、购买该服务的价格</view>
					</view>

					<!-- productType=5（研学活动）B3 申请调用模式 -->
					<view class="price-input-group"
						v-if="detailMode.isStudyActivity || (isApplyCall && businessType === 3)">
						<view class="price-input-group__row">
							<view class="price-input-group__label">上游及组团服务API渠道售价</view>
							<text class="price-input-group__estimate">¥{{ studyPricing.upstreamApiPrice || '0.00' }}
								CNY/人</text>
						</view>
						<view class="price-input-group__description">需将上级及组团服务提供的价格传给您留收该人对人起的费用</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row" style="margin-top: 30rpx;">
							<view class="price-input-group__label">随队增值服务价格</view>
							<view class="price-input-group__input-wrapper">
								<text style="color: #999999;">￥</text>
								<text class="price-input-group__input">{{ studyPricing.escortAServicePrice || '0.00'
								}}</text>
								<text class="price-input-group__currency">CNY/人</text>
							</view>
						</view>
						<view class="price-input-group__description">需将增供您随队服务的对人起费用</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row">
							<view class="price-input-group__label">随队服务结算金额</view>
							<text class="price-input-group__estimate">¥{{ studyPricing.escortASettlement || '0.00' }}
								CNY/人</text>
						</view>
						<view class="price-input-group__description">扣收平台软件技术服务费（费率{{ rate * 100 }}%）后的实际到账金额</view>
						<view class="price-input-group__divider"></view>
						<view class="price-input-group__row" style="margin-top: 30rpx;">
							<view class="price-input-group__label">合单售价</view>
							<text class="price-input-group__estimate" style="font-size: 28rpx;"><text
									style="color:#E64D42">¥{{ studyPricing.totalPrice || '0.00' }}</text> CNY/人</text>
						</view>
						<view class="price-input-group__description">需将下得给分销渠道的最终费价</view>
					</view>
				</section>

				<!-- 合作概要 -->
				<section class="section">
					<view class="section-header">
						<view class="section-header__icon-wrapper">
							<FontIcon name="icon-shichangqudaoshezhi" :size="18"
								class="section-header__icon section-header__font_icon">
							</FontIcon>
						</view>
						<text class="section-header__title">合作概要</text>
					</view>

					<view class="form-group">
						<view class="form-group__item">
							<text class="form-group__label">上架协议</text>
							<view style="flex: 1;text-align: right;line-height: 1.6;">
								<template v-for="(agreement, index) in getAgreements" :key="index">
									<text style="color: #007aff;text-decoration: underline;font-size: 28rpx;"
										@click="viewAgreement(agreement)">《{{ agreement }}》</text>
									<text v-if="index < getAgreements.length - 1" style="color: #333333;">、</text>
								</template>
								<text v-if="getAgreements.length === 0" class="form-group__picker">暂无协议</text>
							</view>
						</view>
						<view class="form-group__item">
							<text class="form-group__label">上架时间</text>
							<text class="form-group__picker">{{ cooperationSummary.shelfTime || '--' }}</text>
						</view>
						<view class="form-group__item">
							<text class="form-group__label">操作人</text>
							<text class="form-group__picker">{{ cooperationSummary.operator || '--' }}</text>
						</view>
					</view>
				</section>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '@/utils/request.js'
import ProductCard from '@/components/ProductCard.vue'
import AdaptiveNavBar from '@/components/AdaptiveNavBar.vue'
import FontIcon from '@/components/FontIcon.vue'
import DateCard from '@/components/DateCard.vue'
import { mergeAllProducts } from '@/utils/productUtil'

export default {
	components: {
		ProductCard,
		AdaptiveNavBar,
		FontIcon,
		DateCard
	},
	data() {
		return {
			productId: '',
			// 产品信息
			productInfo: {
				title: '',
				ageRange: '',
				duration: '',
				departure: '',
				category: '',
				price: '',
				image: ''
			},
			// 市场渠道设置
			marketChannelSettings: {
				salesMode: 'api渠道模式',
				apiCollaboration: '已启用'
			},
			periodSettings: {
				applicationDeadline: 15,
				confirmationTime: 3
			},
			quotaSettings: {
				maxMembersPerGroup: 50,
				minGroupSize: 30,
				maxGroupsPerPeriod: 20
			},
			venueContacts: [],
			showStaffPopupForm: false,
			contactEditContext: 'venue',
			contactTypeOptions: [
				{ label: '请选择类型', value: '' },
				{ label: '报名联系人', value: '报名联系人' },
				{ label: '负责人', value: '负责人' },
				{ label: '客服', value: '客服' },
				{ label: '带队老师', value: '带队老师' },
				{ label: '自定义', value: 'custom' }
			],
			contactTypeIndex: 0,
			newStaff: {
				category: '',
				name: '',
				phone: ''
			},
			servicePricing: {
				channelPrice: 0,
				settlementAmount: 0,
				serviceFeeRate: 0.06
			},
			groupBusinessPricing: {
				destinationServicePrice: 0,
				groupAddedServicePrice: 0,
				estimatedGroupSettlement: 0,
				totalPrice: 0
			},
			studyPricing: {
				upstreamApiPrice: 0,
				escortAServicePrice: 0,
				escortASettlement: 0,
				totalPrice: 0
			},
			smallGroupSettings: {
				groupMaxPeople: 0,
				groupMinPeople: 0,
				groupsCount: 0,
				maxGroupsPerService: 0
			},
			rate: 0.06,
			priceDescriptions: {
				servicePrice1: '备注：* 此处标注的 "服务售价"，指为付费报名参营、参团人员提供本段服务的价格。该价格默认已包含以下两部分费用，相关服务及随团人员无需额外付费：1、本服务项目中涉及的交通、门票、餐饮、住宿等向付费用户提供的全部服务费用；2、下游合作商家派出的跟团工作人员（包括但不限于导师、导游、领队、营长、随队人员、司机等）的相关费用。',
				servicePrice2: '备注：* 此处标注的 "服务售价"，指为付费报名参营、参团人员提供本段服务的价格。该价格默认已包含以下两部分费用，相关服务及人员无需额外付费：1、本服务项目中涉及的交通、门票、餐饮、住宿等向付费用户提供的全部服务费用；2、下游合作商家派出的跟团工作人员（包括但不限于研学导师、随队、司机等）的相关费用。',
				settlementAmount: '扣收软件技术服务费（费率{{ rate * 100 }}%）后的实际到账金额',
				destinationServicePrice: '备注*指目的地接待服务商给出的报价',
				totalPrice1: '指终端消费者预订、购买该服务的价格',
				upstreamApiPrice: '需将上级及组团服务提供的价格传给您留收该人对人起的费用',
				escortServicePrice: '需将增供您随队服务的对人起费用',
				totalPrice2: '需将下得给分销渠道的最终费价'
			},
			cooperationSummary: {
				agreementType: '境内研学接团协议',
				shelfTime: '',
				operator: ''
			},
			businessType: 1,
			productType: '',
			isApplyCall: false,
			saleArea: '',
			periodDates: [],
			gatherAddress: '',
			organizerContacts: [],
			teamMembers: []
		}
	},
	computed: {
		// 布尔开关：根据 productType 区分页面模式
		detailMode() {
			const productTypeNum = Number(this.productType) || 0
			return {
				// productType=1（泛营地接待）和 productType=3（目的地接待）显示相同内容
				isCampReception: productTypeNum === 1,
				isDestinationReception: productTypeNum === 3,
				// productType=1 或 3 显示创建模式的目的地接待/泛营地接待页面
				isDestReceiveOrCamp: productTypeNum === 1 || productTypeNum === 3,
				// productType=2 综合研学业务
				isComprehensiveStudy: productTypeNum === 2,
				// productType=4 组团业务（B2申请调用模式）
				isGroupBusiness: productTypeNum === 4,
				// productType=5 研学活动
				isStudyActivity: productTypeNum === 5
			}
		},
		productCardInfo() {
			console.log('productInfo',this.productInfo)
			// 默认使用productInfo,如果没有的话则使用原本的逻辑
			if (this.productInfo && this.productInfo.mainInfo) {
				return this.productInfo
			}
			
			// 兜底：如果没有 mainInfo，构建兼容结构
			let mergedItineraries = []
			if (this.productInfo.departure || this.productInfo.duration) {
				mergedItineraries = [{
					details: [{
						items: [{
							address: this.productInfo.departure || ''
						}]
					}]
				}]
			}
			
			return {
				mainImage: this.productInfo.image,
				mainInfo: {
					productSpu: {
						name: this.productInfo.name,
						mainImage: this.productInfo.image,
						productType: this.productType
					},
					productSku: {
						title: this.productInfo.title,
						minYearOld: this.productInfo.ageRange?.split('-')[0] || '',
						maxYearOld: this.productInfo.ageRange?.split('-')[1]?.replace('岁', '') || ''
					},
					price: this.productInfo.price || '0',
					saleArea: this.productInfo.category || ''
				},
				mergedItineraries,
				ChannelName: this.productInfo.category || ''
			}
		},
		// 根据商家类型和产品类型返回需要显示的协议列表
		getAgreements() {
			const agreements = []
			if (this.isApplyCall) {
				agreements.push('境内研学接团协议', '境内研学参营协议', '境内研学随队协议')
				return agreements
			}
			const companyInfo = uni.getStorageSync('companyInfo') || {}
			const businessType = companyInfo.businessType || this.businessType
			let actualProductType = this.productType
			const businessEntry = uni.getStorageSync('businessEntry') || ''
			if (typeof actualProductType === 'number' || (typeof actualProductType === 'string' && /^\d+$/.test(actualProductType))) {
				const productTypeNum = Number(actualProductType)
				if (productTypeNum === 1 || productTypeNum === 3) {
					actualProductType = 'dest_receive'
				} else if (productTypeNum === 2) {
					actualProductType = 'comprehensive_study'
				} else if (productTypeNum === 4) {
					actualProductType = 'group_travel'
				} else if (productTypeNum === 5) {
					actualProductType = 'yanxue'
				}
			}
			if (!actualProductType && businessEntry) {
				if (businessEntry === 'dest_receive' || businessEntry === '目的地接待业务' || businessEntry?.includes('目的地接待') || businessEntry?.includes('接待')) {
					actualProductType = 'dest_receive'
				} else if (businessEntry === 'comprehensive_study' || businessEntry === 'comprehensive_research' || businessEntry?.includes('综合研学')) {
					actualProductType = 'comprehensive_study'
				} else if (businessEntry === 'group_travel' || businessEntry?.includes('组团')) {
					actualProductType = 'group_travel'
				} else if (businessEntry === 'yanxue' || businessEntry?.includes('研学')) {
					actualProductType = 'yanxue'
				}
			}
			if (businessType === 1) {
				agreements.push('境内研学接团协议')
			} else if (businessType === 2) {
				if (actualProductType === 'dest_receive') {
					agreements.push('境内研学接团协议')
				} else if (actualProductType === 'comprehensive_study') {
					agreements.push('境内研学参营协议', '境内研学随队协议')
				} else if (actualProductType === 'group_travel') {
					agreements.push('境内研学接团协议', '境内研学参营协议', '境内研学随队协议')
				}
			} else if (businessType === 3) {
				agreements.push('境内研学随队协议', '境内研学参营协议')
			}
			return agreements
		},
		// 判断是否显示"渠道申请截止"
		shouldShowChannelApplicationDeadline() {
			let actualProductType = this.productType
			const businessEntry = uni.getStorageSync('businessEntry') || ''
			if (typeof actualProductType === 'number' || (typeof actualProductType === 'string' && /^\d+$/.test(actualProductType))) {
				const productTypeNum = Number(actualProductType)
				if (productTypeNum === 4) {
					actualProductType = '4'
				} else {
					actualProductType = String(actualProductType)
				}
			}
			if (!actualProductType && businessEntry) {
				if (businessEntry === 'group_travel' || businessEntry?.includes('组团')) {
					actualProductType = '4'
				}
			}
			return (this.businessType === 1 || this.businessType === 2) && actualProductType !== '4' && !this.isApplyCall
		},
		// 判断是否显示"校组申请截止"
		shouldShowSchoolGroupApplicationDeadline() {
			let actualProductType = this.productType
			const businessEntry = uni.getStorageSync('businessEntry') || ''
			if (typeof actualProductType === 'number' || (typeof actualProductType === 'string' && /^\d+$/.test(actualProductType))) {
				const productTypeNum = Number(actualProductType)
				if (productTypeNum === 4) {
					actualProductType = '4'
				} else {
					actualProductType = String(actualProductType)
				}
			}
			if (!actualProductType && businessEntry) {
				if (businessEntry === 'group_travel' || businessEntry?.includes('组团')) {
					actualProductType = '4'
				}
			}
			return this.isApplyCall && (this.businessType === 2 || actualProductType === '4')
		},
		// 服务售价说明
		getServicePriceKey() {
			let actualProductType = this.productType
			const businessEntry = uni.getStorageSync('businessEntry') || ''
			if (typeof actualProductType === 'number' || (typeof actualProductType === 'string' && /^\d+$/.test(actualProductType))) {
				const productTypeNum = Number(actualProductType)
				if (productTypeNum === 1 || productTypeNum === 3) {
					return 'servicePrice1'
				}
				return 'servicePrice2'
			}
			if (!actualProductType && businessEntry) {
				if (businessEntry === 'dest_receive' || businessEntry === '目的地接待业务' || businessEntry?.includes('目的地接待') || businessEntry?.includes('接待')) {
					return 'servicePrice1'
				}
				return 'servicePrice2'
			}
			if (this.businessType === 1) {
				return 'servicePrice1'
			} else if (this.businessType === 2) {
				if (actualProductType === 'dest_receive' || actualProductType === '3') {
					return 'servicePrice1'
				}
				return 'servicePrice2'
			}
			return 'servicePrice1'
		},
		periodSettingsAvailable() {
			return !!(this.periodSettings && (this.periodSettings.applicationDeadline ?? null) !== null)
		},
		periodDeadlineLabel() {
			// productType=4 组团业务显示"校组申请截止"
			if (this.detailMode.isGroupBusiness || (this.isApplyCall && this.businessType === 2)) {
				return '校组申请截止：行程日前'
			}
			return '渠道申请截止：行程日前'
		},
		periodDeadlineDescription() {
			return '申请特定班期必须提前的天数，设定到期后，该班期不再接受新的合作申请'
		},
		periodConfirmationLabel() {
			return '成团确认日期：行程日前'
		},
		periodConfirmationDescription() {
			return '设定时间到期后，成团人数达标，解除对接团方的人数责任'
		},
		saleAreaParts() {
			const raw = (this.saleArea || '').trim()
			if (!raw) {
				return { raw: '', province: '', city: '', district: '', hasParts: false }
			}
			const match = raw.match(/^(.+?省)(.+?市)?(.+?(?:区|县))?$/)
			if (match) {
				const [, province = '', city = '', district = ''] = match
				return {
					raw,
					province: province || '',
					city: city || '',
					district: district || '',
					hasParts: !!(province || city || district)
				}
			}
			const parts = raw.split(/\s+/).filter(Boolean)
			return {
				raw,
				province: parts[0] || '',
				city: parts[1] || '',
				district: parts[2] || '',
				hasParts: parts.length > 1
			}
		},
		quotaDisplayItems() {
			const items = []
			if (this.quotaSettings.maxMembersPerGroup) {
				items.push({
					key: 'maxMembers',
					label: '每团满员人数',
					value: this.quotaSettings.maxMembersPerGroup,
					unit: '人',
					description: '报名达到该人数后（10-50）'
				})
			}
			if (this.quotaSettings.minGroupSize) {
				items.push({
					key: 'minMembers',
					label: '最低成团人数',
					value: this.quotaSettings.minGroupSize,
					unit: '人',
					description: '未达到成团人数或组团等待的期限到期后，将全额退款（10-30）'
				})
			}
			if (this.quotaSettings.maxGroupsPerPeriod) {
				items.push({
					key: 'maxGroups',
					label: '每期服务承载最大团数',
					value: this.quotaSettings.maxGroupsPerPeriod,
					unit: '团',
					description: '根据本期承载的最大人数综合配置（1-20）'
				})
			}
			return items
		},
		smallGroupDisplayItems() {
			const items = []
			if (this.smallGroupSettings.groupMaxPeople) {
				items.push({
					key: 'groupMax',
					label: '每小组名额上限',
					value: this.smallGroupSettings.groupMaxPeople,
					unit: '人',
					description: '随队服务人员参与与参营者比例不低于1:20（6-20）'
				})
			}
			if (this.smallGroupSettings.groupMinPeople) {
				items.push({
					key: 'groupMin',
					label: '每小组名额下限',
					value: this.smallGroupSettings.groupMinPeople,
					unit: '人',
					description: '随队服务人员参与与参营者比例不高于1:6（5-8）'
				})
			}
			if (this.smallGroupSettings.groupsCount) {
				items.push({
					key: 'groupCount',
					label: '配置小组数量',
					value: this.smallGroupSettings.groupsCount,
					unit: '个',
					description: '按合同约定配置随队小组数量'
				})
			}
			return items
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		showStaffPopup(context = 'venue') {
			this.contactEditContext = context || 'venue'
			this.showStaffPopupForm = true
			this.contactTypeIndex = 0
			this.newStaff = { category: '', name: '', phone: '' }
		},
		closeStaffPopup() {
			this.showStaffPopupForm = false
		},
		handleContactTypeChange(e) {
			const index = e.detail.value
			this.contactTypeIndex = index
			const selectedOption = this.contactTypeOptions[index]
			if (selectedOption.value === 'custom') {
				uni.showModal({
					title: '自定义类型',
					editable: true,
					placeholderText: '请输入联系人类型',
					success: (res) => {
						if (res.confirm && res.content && res.content.trim()) {
							this.newStaff.category = res.content.trim()
						} else {
							this.contactTypeIndex = 0
							this.newStaff.category = ''
						}
					},
					fail: () => {
						this.contactTypeIndex = 0
						this.newStaff.category = ''
					}
				})
			} else {
				this.newStaff.category = selectedOption.value
			}
		},
		cancelAddStaff() {
			this.closeStaffPopup()
		},
		confirmAddStaff() {
			if (!this.newStaff.name.trim()) {
				this.showError('请输入姓名')
				return
			}
			if (!this.newStaff.phone.trim()) {
				this.showError('请输入电话')
				return
			}
			const phoneRegex = /^1[3-9]\d{9}$/
			if (!phoneRegex.test(this.newStaff.phone)) {
				this.showError('请输入正确的手机号')
				return
			}
			const category = this.newStaff.category.trim() || '联系人'
			const name = this.newStaff.name.trim()
			const phone = this.newStaff.phone.trim()
			const payload = {
				productType: this.productType,
				category,
				name,
				phone
			}
			const context = this.contactEditContext || 'venue'
			let addPromise
			if (context === 'camper') {
				addPromise = request({
					url: `/period-sku/addCamper?spuId=${this.productId}`,
					method: 'PUT',
					data: payload
				})
			} else {
				addPromise = request({
					url: `/period-sku/addContact?spuId=${this.productId}`,
					method: 'PUT',
					data: payload
				})
			}
			addPromise.then((res) => {
				if (res.code === 200) {
					if (context === 'venue') {
						this.venueContacts.push({
							role: category,
							name,
							phoneNumber: phone,
							roleType: this.getRoleType(this.newStaff.category)
						})
					} else if (context === 'organizer') {
						this.organizerContacts.push({
							category,
							name,
							phone
						})
					} else if (context === 'camper') {
						this.teamMembers.push({
							category,
							name,
							phone
						})
					}
					this.showSuccess(context === 'camper' ? '随队人员添加成功' : '联系人添加成功')
					this.closeStaffPopup()
				}
			}).catch(() => {
				this.showError(context === 'camper' ? '添加随队人员失败' : '添加联系人失败')
			}).finally(() => {
				this.loadShelfDetails()
			})
		},
		getRoleType(category) {
			const roleTypeMap = {
				'产品经理': 'product-manager',
				'地接计调': 'local-coordinator',
				'报名联系人': 'contact',
				'负责人': 'manager',
				'客服': 'service',
				'带队老师': 'teacher'
			}
			return roleTypeMap[category] || 'contact'
		},
		deleteContact(phoneNumber) {
			if (this.venueContacts.length <= 1) {
				this.showError('至少需要保留一个联系人')
				return
			}
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个联系人吗？',
				success: (res) => {
					if (res.confirm) {
						request({
							url: `/period-sku/deleteContact?spuId=${this.productId}&phone=${phoneNumber}`,
							method: 'DELETE'
						}).then((resp) => {
							if (resp.code === 200) {
								this.loadShelfDetails()
								this.showSuccess('删除成功')
							}
						}).catch(error => {
							console.error('删除联系人失败:', error)
						})
					}
				}
			})
		},
		deleteOrganizerContact(phoneNumber) {
			if (!phoneNumber) {
				this.showError('联系人手机号无效')
				return
			}
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个联系人吗？',
				success: (res) => {
					if (res.confirm) {
						request({
							url: `/period-sku/deleteContact?spuId=${this.productId}&phone=${phoneNumber}`,
							method: 'DELETE'
						}).then((resp) => {
							if (resp.code === 200) {
								this.loadShelfDetails()
								this.showSuccess('删除成功')
							}
						}).catch(error => {
							console.error('删除组团社联系人失败:', error)
						})
					}
				}
			})
		},
		deleteCamper(phoneNumber) {
			if (!phoneNumber) {
				this.showError('随队人员手机号无效')
				return
			}
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该随队人员吗？',
				success: (res) => {
					if (res.confirm) {
						request({
							url: `/period-sku/deleteCamper?spuId=${this.productId}&phone=${phoneNumber}`,
							method: 'DELETE'
						}).then((resp) => {
							if (resp.code === 200) {
								this.loadShelfDetails()
								this.showSuccess('删除成功')
							}
						}).catch(error => {
							console.error('删除随队人员失败:', error)
						})
					}
				}
			})
		},
		showError(message) {
			uni.showToast({ title: message, icon: 'none', duration: 2000 })
		},
		showSuccess(message) {
			uni.showToast({ title: message, icon: 'success', duration: 2000 })
		},
		formatDisplayValue(value) {
			if (value === undefined || value === null || value === '') {
				return '--'
			}
			return value
		},
		formatMonthDay(dateString) {
			if (!dateString) return ''
			const parts = dateString.split('-')
			if (parts.length >= 3) {
				return `${parts[1]}/${parts[2]}`
			}
			return dateString
		},
		getWeekDay(dateString) {
			if (!dateString) return ''
			const date = new Date(dateString)
			const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			return weekDays[date.getDay()]
		},
		async loadShelfDetails() {
			try {
				if (!this.productId) {
					console.error('加载上架详情失败: 缺少产品ID')
					uni.showToast({ title: '缺少产品ID', icon: 'none' })
					return
				}
				const companyInfo = uni.getStorageSync('companyInfo') || {}
				const merchantId = companyInfo.id || ''
				const merchantType = companyInfo.businessType || ''
				this.businessType = companyInfo.businessType || 1
				const businessEntry = uni.getStorageSync('businessEntry') || ''
				this.productType = businessEntry
				const [productRes, periodsRes] = await Promise.all([
					request({ url: `/product-spu/getProduct?id=${this.productId}&merchantType=${merchantType}`, method: 'GET' }),
					request({ url: `/period-sku/getPeriods?spuId=${this.productId}&merchantId=${merchantId}&merchantType=${merchantType}`, method: 'GET' })
				])
				if (productRes && (productRes.code === 200 || productRes.code === 1) && productRes.data) {
					const productData = productRes.data
					console.log('productData', productData)
					const d = productData
					const p1 = d.p1 || {}
					const p2 = d.p2 || {}
					const p3 = d.p3 || {}

					// 🔑 根据 productType 判断使用 p1、p2 还是 p3（与 cooperation.vue 保持一致）
					const productType = p2?.productSpu?.productType || p1?.productSpu?.productType || p3?.productSpu?.productType
					let mainData, mainSource

					if (productType == 1 || productType == 3) {
						mainData = p1
						mainSource = 'p1'
					} else if (productType == 2 || productType == 4) {
						mainData = p2
						mainSource = 'p2'
					} else if (productType == 5) {
						mainData = p3
						mainSource = 'p3'
					} else {
						mainData = p1 && p1.productSpu ? p1 : (p2 && p2.productSpu ? p2 : p3)
						mainSource = (p1 && p1.productSpu) ? 'p1' : ((p2 && p2.productSpu) ? 'p2' : 'p3')
					}

					if (!mainData || !mainData.productSpu) {
						if (p1 && p1.productSpu) {
							mainData = p1
							mainSource = 'p1'
						} else if (p2 && p2.productSpu) {
							mainData = p2
							mainSource = 'p2'
						} else if (p3 && p3.productSpu) {
							mainData = p3
							mainSource = 'p3'
						}
					}

					const productSpu = mainData.productSpu || d.productSpu || d.mainInfo?.productSpu || {}
					const productSku = mainData.productSku || d.productSku || d.mainInfo?.productSku || {}

					if (productSpu.productType !== undefined && productSpu.productType !== null) {
						this.productType = productSpu.productType
					}

					// 🔑 使用 mergeAllProducts 合并完整的产品信息（与 cooperation.vue 保持一致）
					const mergedProductInfo = mergeAllProducts([d], merchantType)

					// 如果 mergeAllProducts 返回有效数据，使用它；否则使用手动构建的数据
					if (mergedProductInfo && mergedProductInfo.length > 0 && mergedProductInfo[0].mainInfo) {
						this.productInfo = mergedProductInfo[0]
						console.log('✅ 产品信息加载成功（使用 mergeAllProducts）:', mergedProductInfo[0])
					} else {
						// 兜底：使用手动构建的数据结构（与 cooperation.vue 保持一致）
						const firstImg = (() => {
							if (Array.isArray(productSku.images) && productSku.images.length > 0) {
								const img0 = productSku.images[0]
								return (typeof img0 === 'string') ? img0 : (img0.url || img0.imgUrl || productSpu.mainImage || '/static/6.jpg')
							}
							return productSpu.mainImage || '/static/6.jpg'
						})()

						const ageRange = (productSku.minYearOld != null && productSku.maxYearOld != null) ?
							`${productSku.minYearOld}-${productSku.maxYearOld}岁` :
							(productSku.ageRange || productSku.fitAge || '—')
						const duration = productSku.duration || productSku.days || (Array.isArray(productSku.specificItinerary) && productSku.specificItinerary.length > 0 ?
							`${productSku.specificItinerary.length}日` : '—')
						const location = productSpu.cityName || productSpu.address || productSpu.city || '—'

						this.productInfo = {
							mainInfo: {
								productSpu,
								productSku,
								source: mainSource,
								sourceType: mainSource
							},
							title: productSku.title || productSpu.name || '—',
							image: firstImg,
							details: {
								ageRange,
								duration,
								location
							},
							tag: productSpu.tag || '—',
							price: {
								label: '渠道',
								value: (productSku.channelPrice != null) ?
									`¥${Number(productSku.channelPrice).toFixed(2)}` : (productSpu.price != null) ?
										`¥${Number(productSpu.price).toFixed(2)}` : (d.totalPrice != null ?
											`¥${Number(d.totalPrice).toFixed(2)}` : '—')
							},
							productType: productType,
							mainSource: mainSource
						}
						console.log('✅ 产品信息加载成功（使用手动构建）:', this.productInfo)
					}

					// 保存其他需要的信息（用于页面其他部分）
					if (productSpu.createAt && productSpu.createAt !== null) {
						const createDate = new Date(productSpu.createAt)
						const year = createDate.getFullYear()
						const month = String(createDate.getMonth() + 1).padStart(2, '0')
						const day = String(createDate.getDate()).padStart(2, '0')
						const hours = String(createDate.getHours()).padStart(2, '0')
						const minutes = String(createDate.getMinutes()).padStart(2, '0')
						this.cooperationSummary.shelfTime = `${year}年${month}月${day}日 ${hours}:${minutes}`
					}
					if (productSpu.updateTime && productSpu.updateTime !== null) {
						this.cooperationSummary.operator = '系统管理员'
					}
				}
				if (periodsRes && (periodsRes.code === 200 || periodsRes.code === 1) && periodsRes.data) {
					const periodsData = periodsRes.data
					if (Array.isArray(periodsData) && periodsData.length > 0) {
						const firstGroup = periodsData[0]
						let periodArray = []
						const periodPriority = [firstGroup.p3s, firstGroup.p2s, firstGroup.p1s]
						for (const periodGroup of periodPriority) {
							if (!Array.isArray(periodGroup) || periodGroup.length === 0) continue
							periodArray = periodGroup
							break
						}
						if (periodArray.length > 0) {
							const firstPeriod = periodArray[0]
							if (firstPeriod.applicationDeadline !== undefined) {
								this.periodSettings.applicationDeadline = firstPeriod.applicationDeadline
							}
							if (firstPeriod.confirmationTime !== undefined) {
								this.periodSettings.confirmationTime = firstPeriod.confirmationTime
							}
							if (firstPeriod.fullNumberOfPeople !== undefined) {
								this.quotaSettings.maxMembersPerGroup = firstPeriod.fullNumberOfPeople
							}
							if (firstPeriod.leastNumberOfPeople !== undefined) {
								this.quotaSettings.minGroupSize = firstPeriod.leastNumberOfPeople
							}
							if (firstPeriod.fullNumberOfRegiment !== undefined) {
								this.quotaSettings.maxGroupsPerPeriod = firstPeriod.fullNumberOfRegiment
							}
							if (firstPeriod.groupMaxPeople !== undefined) {
								this.smallGroupSettings.groupMaxPeople = firstPeriod.groupMaxPeople
							}
							if (firstPeriod.groupMinPeople !== undefined) {
								this.smallGroupSettings.groupMinPeople = firstPeriod.groupMinPeople
							}
							if (firstPeriod.groupsCount !== undefined) {
								this.smallGroupSettings.groupsCount = firstPeriod.groupsCount
							}
							if (firstPeriod.maxGroupsPerService !== undefined) {
								this.smallGroupSettings.maxGroupsPerService = firstPeriod.maxGroupsPerService
							}
							if (firstPeriod.contact && Array.isArray(firstPeriod.contact)) {
								this.venueContacts = firstPeriod.contact
									.filter(contact => contact.productType === 1 || contact.productType === 3 || contact.productType === undefined)
									.map(contact => ({
										role: contact.category || contact.role || '联系人',
										name: contact.name || '未知',
										phoneNumber: contact.phone || '未知',
										roleType: contact.roleType || 'default',
										productType: contact.productType
									}))
								if (this.businessType === 2) {
									this.organizerContacts = firstPeriod.contact
										.filter(contact => contact.productType === 2 || contact.productType === 4)
										.map(contact => ({
											category: contact.category || '联系人',
											name: contact.name || '未知',
											phone: contact.phone || '未知',
											productType: contact.productType
										}))
								}
							}
							if (firstPeriod.teamMembers && Array.isArray(firstPeriod.teamMembers)) {
								this.teamMembers = firstPeriod.teamMembers.map(member => ({
									category: member.category || member.title || '随队',
									name: member.name || '未知',
									phone: member.phone || '未知',
									productType: member.productType
								}))
							}
							if (this.businessType === 2 && Array.isArray(periodArray)) {
								this.periodDates = periodArray.map(period => {
									const availableDate = period.availableDate || {}
									const year = availableDate.yearDate ?? availableDate.year ?? ''
									const monthNum = availableDate.monthDate ?? availableDate.month ?? ''
									const dayNum = availableDate.dayDate ?? availableDate.day ?? ''
									const mm = monthNum !== '' ? String(monthNum).padStart(2, '0') : ''
									const dd = dayNum !== '' ? String(dayNum).padStart(2, '0') : ''
									const dateStr = period.startDate || (year && mm && dd ? `${year}-${mm}-${dd}` : '')
									return {
										DateName: dateStr,
										DateName1: this.formatMonthDay(dateStr),
										WeekName: this.getWeekDay(dateStr),
										Datevalue1: this.formatMonthDay(dateStr),
										date: this.formatMonthDay(dateStr),
										week: this.getWeekDay(dateStr),
										periodData: period
									}
								})
							}
							if (firstPeriod.gatherAddress) {
								this.gatherAddress = firstPeriod.gatherAddress
							}
							if (firstPeriod.saleArea) {
								this.saleArea = firstPeriod.saleArea
							}
							if (firstPeriod.price !== undefined) {
								const channelPrice = Number(firstPeriod.price) || 0
								this.servicePricing.channelPrice = channelPrice
								const rate = firstPeriod.rate || 0.06
								this.rate = rate
								this.servicePricing.serviceFeeRate = rate
								this.servicePricing.settlementAmount = Math.round(channelPrice * (1 - rate) * 100) / 100
							}
							if (firstPeriod.secondServicePrice !== undefined) {
								this.groupBusinessPricing.destinationServicePrice = Number(firstPeriod.secondServicePrice) || 0
							}
							if (firstPeriod.secondAddedServicePrice !== undefined) {
								this.groupBusinessPricing.groupAddedServicePrice = Number(firstPeriod.secondAddedServicePrice) || 0
							}
							if (firstPeriod.secondEstimatedPrice !== undefined) {
								this.groupBusinessPricing.estimatedGroupSettlement = Number(firstPeriod.secondEstimatedPrice) || 0
							}
							if (firstPeriod.secondTotalPrice !== undefined) {
								this.groupBusinessPricing.totalPrice = Number(firstPeriod.secondTotalPrice) || 0
							}
							if (firstPeriod.thirdServicePrice !== undefined) {
								this.studyPricing.upstreamApiPrice = Number(firstPeriod.thirdServicePrice) || 0
							}
							if (firstPeriod.thirdAddedServicePrice !== undefined) {
								this.studyPricing.escortAServicePrice = Number(firstPeriod.thirdAddedServicePrice) || 0
							}
							if (firstPeriod.thirdEstimatedPrice !== undefined) {
								this.studyPricing.escortASettlement = Number(firstPeriod.thirdEstimatedPrice) || 0
							}
							if (firstPeriod.totalPrice !== undefined) {
								this.studyPricing.totalPrice = Number(firstPeriod.totalPrice) || 0
							}
							if (firstPeriod.createAt && firstPeriod.createAt !== null) {
								const createDate = new Date(firstPeriod.createAt)
								const year = createDate.getFullYear()
								const month = String(createDate.getMonth() + 1).padStart(2, '0')
								const day = String(createDate.getDate()).padStart(2, '0')
								const hours = String(createDate.getHours()).padStart(2, '0')
								const minutes = String(createDate.getMinutes()).padStart(2, '0')
								this.cooperationSummary.shelfTime = `${year}年${month}月${day}日 ${hours}:${minutes}`
							}
							if (firstPeriod.updateTime && firstPeriod.updateTime !== null) {
								this.cooperationSummary.operator = '系统管理员'
							}
							// productType=2（综合研学业务）：优先使用 secondServicePrice/secondEstimatedPrice 作为价格展示
							if (this.detailMode.isComprehensiveStudy &&
								firstPeriod.secondServicePrice !== undefined &&
								firstPeriod.secondServicePrice !== null) {
								const channelPrice = Number(firstPeriod.secondServicePrice) || 0
								this.servicePricing.channelPrice = channelPrice

								// 费率仍然使用 firstPeriod.rate（或默认 0.06）
								const rate = firstPeriod.rate || this.rate || 0.06
								this.rate = rate
								this.servicePricing.serviceFeeRate = rate

								// 结算金额，可以直接按费率算，也会等于 secondEstimatedPrice
								this.servicePricing.settlementAmount = Math.round(channelPrice * (1 - rate) * 100) / 100
							}
						}
					}
				}
			} catch (error) {
				console.error('加载上架详情失败:', error)
				uni.showToast({ title: '加载失败', icon: 'none' })
			}
		}
	},
	onLoad(options) {
		if (options.productId) {
			this.productId = options.productId
		}
		this.loadShelfDetails()
	}
}
</script>



<style lang="scss" scoped>
.page-top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 280rpx;
	background: #FC642F;
	box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(216, 216, 216, 0.72);
	backdrop-filter: blur(0px);
	pointer-events: none;
}

.content-area {
	background: #F5F6F8;
	min-height: 100vh;
}

// 全局变量定义
$primary-color: #3FBDA3;
$secondary-color: #82A0F7;
$danger-color: #FF3B30;
$warning-color: #FC642F;
$success-color: #4CAF50;
$gray-color: #8E8E93;
$light-gray: #F1F1F1;
$border-color: #EEEEEE;
$text-primary: #333333;
$text-secondary: #999999;
$text-light: #FFFFFF;
$radius-base: 12rpx;
$radius-large: 20rpx;
$shadow-sm: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
$shadow-md: 0rpx -4rpx 14rpx 0rpx rgba(241, 241, 241, 0.5);
$transition-base: all 0.3s ease;

.shelf-details-container {
	position: relative;
}

.main-content {
	padding-bottom: 100rpx;
}

.main-top-period {
	margin: 24rpx;
	padding: 32rpx 28rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.product-card-wrapper {
	padding: 8rpx;
}

// 通用区块样式
.section {
	background: #ffffff;
	margin: 24rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

	&-header {
		display: flex;
		align-items: center;
		padding: 32rpx 28rpx 24rpx;
		border-bottom: 1rpx solid #F8F8F8;

		&__left {
			display: flex;
			align-items: center;
		}

		&__icon-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(135deg, #3FBDA3 0%, #35A590 100%);
			border-radius: 10rpx;
			margin-right: 16rpx;
		}

		&__icon {
			font-size: 22rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&__title {
			font-size: 30rpx;
			font-weight: 700;
			color: #000000;
			letter-spacing: 0.5rpx;
		}
	}

	&-description {
		font-size: 24rpx;
		color: #999999;
		padding: 0rpx 30rpx 24rpx;
		line-height: 1.6;
		letter-spacing: 0.5rpx;
	}
}

.section-header__font_icon {
	color: #000000;
}

// 数字输入组样式
.number-input-group {
	padding: 24rpx 30rpx;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16rpx;

	&__label {
		font-size: 28rpx;
		color: #000000;
		font-weight: 400;
		line-height: 1.5;
	}

	&__left {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	&__desc {
		font-size: 24rpx;
		color: #999999;
		line-height: 1.6;
		letter-spacing: 0.5rpx;
	}

	&__control {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__unit {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 8rpx;
	}

	&__display {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 16rpx;
		height: 56rpx;
		min-width: 100rpx;
		justify-content: center;
		border: 1rpx solid #E5E5E5;

		&--wide {
			min-width: 120rpx;
		}
	}

	&__value {
		font-size: 32rpx;
		color: #000000;
		font-weight: 600;
	}
}

// 只读显示控件样式
.number-display-control {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.number-display-badge {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F8F8F8;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #D8D8D8;
	font-weight: 400;
	border: 1rpx solid #EEEEEE;

	&--minus,
	&--plus {
		pointer-events: none;
	}
}

.margin-top-large {
	margin-top: 0rpx;
}

// 小组配额摘要样式
.group-quota-summary {
	padding: 24rpx 28rpx;
	background: #F8F9FA;
	margin: 0 30rpx 20rpx;
	border-radius: 12rpx;
	border: 1rpx solid #F0F0F0;

	.summary-text {
		display: block;
		font-size: 28rpx;
		color: #000000;
		font-weight: 600;
		margin-bottom: 12rpx;
		line-height: 1.5;
	}

	.summary-hint {
		display: block;
		font-size: 24rpx;
		color: #999999;
		line-height: 1.6;
		letter-spacing: 0.5rpx;
	}
}

.working-box {
	padding: 0rpx 28rpx 16rpx 28rpx;

	.working-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #F8F9FA;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		border: 1rpx solid #F0F0F0;
		font-size: 28rpx;
		min-height: 88rpx;

		.working-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			flex: 1;
			gap: 8rpx;

			.woking-info-top {
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
				display: flex;
				align-items: center;
				line-height: 1.4;

				text {
					margin-left: 12rpx;
					font-size: 20rpx;
					color: #FC642F;
					padding: 6rpx 16rpx;
					background: rgba(252, 100, 47, 0.08);
					border-radius: 6rpx;
					font-weight: 500;
				}
			}

			.woking-info-bottom {
				color: #999999;
				font-size: 24rpx;
				line-height: 1.4;
			}
		}

		.working-btn {
			.working-delete {
				width: 104rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1rpx solid #FC642F;
				text-align: center;
				line-height: 56rpx;
				color: #FC642F;
				font-size: 24rpx;
				font-weight: 500;
				transition: all 0.3s ease;

				&:active {
					background: rgba(252, 100, 47, 0.05);
				}
			}
		}
	}

	.working-none {
		padding: 48rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #CCCCCC;
	}
}

.working-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8rpx 28rpx 32rpx 28rpx;

	.working-bottom-top {
		display: flex;
		font-size: 24rpx;
		color: #999999;
		flex-direction: column;
		align-items: flex-start;
		margin-right: auto;
		line-height: 1.6;
	}

	.working-bottom-bottom {
		min-width: 120rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #FC642F;
		text-align: center;
		line-height: 56rpx;
		font-size: 26rpx;
		color: #FC642F;
		font-weight: 500;
		padding: 0 20rpx;
		transition: all 0.3s ease;

		&:active {
			background: rgba(252, 100, 47, 0.05);
			transform: scale(0.98);
		}
	}
}

// 价格输入组样式
.price-input-group {
	padding: 24rpx 30rpx 20rpx;

	&__row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		min-height: 48rpx;
	}

	&__label {
		flex: 1;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		align-items: center;
		font-weight: 400;
		line-height: 1.5;
	}

	&__input-wrapper {
		display: flex;
		align-items: center;
		padding: 0rpx 8rpx;
		gap: 4rpx;
	}

	&__divider {
		height: 1rpx;
		background-color: #F0F0F0;
		margin: 24rpx 0;
	}

	&__input {
		text-align: right;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		padding: 8rpx;
		transition: $transition-base;

		&.has-value,
		&:focus {
			color: #000000;
			font-weight: 600;
		}
	}

	&__currency {
		margin-left: 4rpx;
		font-size: 24rpx;
		color: #666666;
		flex-shrink: 0;
	}

	&__estimate {
		font-size: 28rpx;
		color: #666666;
		min-width: 180rpx;
		text-align: right;
		font-weight: 400;
	}

	&__description {
		font-size: 24rpx;
		color: #999999;
		line-height: 1.6;
		margin-top: 8rpx;
		letter-spacing: 0.5rpx;
	}
}

// 表单组样式
.form-group {
	padding: 24rpx 28rpx;

	&__item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F8F8F8;

		&:last-child {
			border-bottom: none;
		}
	}

	&__label {
		font-size: 28rpx;
		color: #000000;
		font-weight: 600;
		line-height: 1.5;
	}

	&__picker {
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
}

// 接送/集散地点样式
.gather-area-card {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	padding: 20rpx 30rpx 24rpx;
}

.gather-area-chip {
	padding: 12rpx 24rpx;
	background: #F8F9FA;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #333333;
	border: 1rpx solid #F0F0F0;
	font-weight: 500;
	line-height: 1.4;

	&--full {
		flex: 1;
	}
}

.gather-address-display {
	padding: 20rpx 30rpx 24rpx;
}

.gather-address-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20rpx 24rpx;
	background: #F8F9FA;
	border-radius: 12rpx;
	border: 1rpx solid #F0F0F0;
	gap: 20rpx;
}

.gather-address-label {
	font-size: 28rpx;
	color: #000000;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.gather-address-value {
	font-size: 26rpx;
	color: #666666;
	flex: 1;
	text-align: right;
	line-height: 1.6;
	word-break: break-all;
}

// 工作人员配置弹窗样式
.staff-popup-container {
	background-color: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	min-height: 500rpx;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.staff-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 40rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.staff-popup-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #000000;
	letter-spacing: 0.5rpx;
}

.staff-popup-content {
	flex: 1;
	padding: 32rpx 40rpx;
	max-height: 60vh;
}

// 添加联系人表单样式
.staff-add-form {
	background-color: #FFFFFF;
	padding: 32rpx 40rpx;
	border-top: 1rpx solid #F0F0F0;

	&__title {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
		margin-bottom: 24rpx;
	}

	&__fields {
		margin-bottom: 32rpx;
	}

	&__field {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		gap: 16rpx;
	}

	&__label {
		width: 100rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: 600;
		flex-shrink: 0;
	}

	&__input {
		flex: 1;
		height: 72rpx;
		padding: 0 24rpx;
		border: 1rpx solid #E5E5E5;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #000000;
		background-color: #FAFAFA;
		transition: all 0.3s ease;

		&:focus {
			border-color: $primary-color;
			background-color: #FFFFFF;
			outline: none;
		}
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		gap: 16rpx;
	}

	&__cancel {
		padding: 16rpx 40rpx;
		border: 1rpx solid #E5E5E5;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
		transition: $transition-base;

		&:active {
			background-color: #F8F8F8;
		}
	}

	&__confirm {
		padding: 16rpx 40rpx;
		border: none;
		border-radius: 24rpx;
		background-color: $primary-color;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 500;
		transition: $transition-base;

		&:active {
			background-color: darken($primary-color, 10%);
			transform: scale(0.98);
		}
	}
}
</style>
